<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-2)">返回场景</div>
    </div>

    <!-- 背景区域 -->
    <div class="bg-wrapper">
      <div class="bg-content">
        <button class="oval-btn btn-top" @click="handleButtonClick(1)">
          <span class="btn-text">风险探测</span>
          <div class="btn-glow"></div>
        </button>
        <button class="oval-btn btn-left" @click="handleButtonClick(2)">
          <span class="btn-text">风险响应</span>
          <div class="btn-glow"></div>
        </button>
        <button class="oval-btn btn-right" @click="handleButtonClick(3)">
          <span class="btn-text">动机恢复</span>
          <div class="btn-glow"></div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  methods: {
    handleButtonClick(num) {
      this.$router.push({ path: `/trial/tab${num}` });
    },
  },
};
</script>

<style scoped>
/* 页面基础样式 */
.home {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #f4f9ff, #6bacfe);
  overflow: hidden;
}

/* 背景容器，保持居中 + 限制最大宽度 */
.bg-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 固定比例容器（1242x2209 ≈ 0.562） */
.bg-content {
  position: relative;
  width: 100%;
  max-width: 480px; /* 手机默认最大宽度 */
  aspect-ratio: 1242 / 2209;
  background-image: url("https://lesson.iapeap.com/DRM/IMG/%E3%80%90CH%E3%80%91AI-2504PGC-ai%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E6%B5%B7%E6%8A%A5-%E5%85%A8%E5%B1%8F%E6%B5%B7%E6%8A%A5-%E5%A4%96%E9%83%A8AI%20%282%29.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s ease;
}

/* iPad 端放大一点 */
@media (min-width: 768px) and (max-width: 1024px) {
  .bg-content {
    max-width: 720px; /* 放大约 1.5 倍 */
  }
}

/* PC 端再大一点 */
@media (min-width: 1025px) {
  .bg-content {
    max-width: 900px;
  }
}

/* 导航栏 */
.navbar {
  position: absolute;
  bottom: 10px;
  z-index: 100;
}

.nav-back {
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #3a7bff;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  border: none;
  transition: all 0.3s ease;
}

.nav-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(58, 123, 255, 0.4);
}

/* 椭圆按钮 */
.oval-btn {
  position: absolute;
  width: 28%;
  height: 8%;
  border-radius: 50%;
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  background: radial-gradient(
      circle at left top,
      rgba(255, 255, 255, 1) 0%,
      rgba(48, 174, 252, 0.8) 50%,
      rgba(48, 174, 252, 0.8) 100%
    ),
    radial-gradient(
      circle at right bottom,
      rgba(255, 255, 255, 1) 20%,
      rgba(48, 174, 252, 1) 50%,
      rgba(48, 174, 252, 1) 100%
    );
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮文字容器 */
.btn-text {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

/* 按钮光效 */
.btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.6s ease;
  z-index: 1;
}

/* 悬停效果 */
.oval-btn:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 8px 25px rgba(48, 174, 252, 0.4);
}

.oval-btn:hover .btn-glow {
  left: 100%;
}

.oval-btn:hover .btn-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* 点击效果 */
.oval-btn:active {
  transform: translateY(-2px) scale(0.98);
  transition: all 0.1s ease;
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyfloat-delay {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 为每个按钮添加不同的浮动动画 */
.btn-top {
  top: 35%;
  left: 30%;
  animation: float 3s ease-in-out infinite;
}

.btn-left {
  top: 58%;
  left: 10%;
  animation: float 3s ease-in-out infinite 0.5s;
}

.btn-right {
  top: 55%;
  right: 15%;
  animation: float 3s ease-in-out infinite 1s;
}

/* 悬停时暂停动画 */
.oval-btn:hover {
  animation-play-state: paused;
}

/* 脉冲效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(48, 174, 252, 0.4);
  }
  70% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(48, 174, 252, 0);
  }
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(48, 174, 252, 0);
  }
}

/* 为按钮添加脉冲效果 */
.oval-btn {
  animation: pulse 4s infinite;
}

/* 每个按钮不同的脉冲延迟 */
.btn-left {
  animation-delay: 1.3s;
}

.btn-right {
  animation-delay: 2.6s;
}

/* 字体随屏幕变化略微调整 */
@media (max-width: 480px) {
  .oval-btn {
    font-size: 14px;
  }
}
</style>
